<template>
    <div class="video-body">
      <el-upload
    class="upload-demo"
    ref="uploadVideo"
    drag
    action="/api/file/upload"
    multiple
    :disabled="disabledVideo"
    :on-success="videoSuccess"
    :on-progress="handleProgress"
    :limit="1"
    :before-upload="beforeAvatarUpload"
    :on-exceed="handleExceed"
  >
  <template #trigger v-if="postInfo.imgUrl[0]" >
    <video :src="postInfo.imgUrl[0]"  controls style="width:100%;height:100%;"></video>
  </template>
  
    <el-icon v-if="!postInfo.imgUrl[0]" class="el-icon--upload" style="margin-top: 50px;"><upload-filled /></el-icon>
    <div class="el-upload__text" v-if="!postInfo.imgUrl[0]" >
      拖拽上传或<em>点击上传</em>
    </div>
    <template #tip v-if="!postInfo.imgUrl[0]">
      <div class="el-upload__tip" >
        支持MP4、AVI、MOV、WMV、FLV、WEBM格式的视频，且大小不能超过50MB
      </div>
    </template>
  </el-upload>
  <elform>
    <el-form-item label="标题">
      <el-input placeholder="请输入标题" v-model="postInfo.title"></el-input>
    </el-form-item>
        <el-form-item label="内容">
      <el-input placeholder="请输入内容" v-model="postInfo.content"></el-input>
    </el-form-item>
        <el-form-item>
      <el-button type="primary" @click="submit()">发布</el-button>
    </el-form-item>
  </elform>
    </div>
</template>
<script setup lang="ts">
import {ref,onMounted} from 'vue'
import { useRouter } from 'vue-router';
import useCounter from '@/stores/pinia';
import { addPostAPI } from '../../../api/community';
import {deleteFileAPI} from '../../../api/common'
import { UploadFilled } from '@element-plus/icons-vue'
import { parseJwt } from '@/stores/pinia';
import { type UploadProps,type FormInstance,type FormRules,type ElMessageBox,type UploadUserFile, ElMessage, UploadInstance, UploadRawFile, genFileId} from 'element-plus'

const menu=ref(0)
const imgUrl=ref()
const router=useRouter()
const counterStore=useCounter()
const disabledVideo=ref(false)
const showVideo=ref(true)
const user=ref()
const postInfo=ref({
  authorId:'',
  authorName:'',
  authorAvatar:'',
  title:'',
  content:'',
  imgUrl:[],
  postType:2
})
const menuId=(id: number)=>{
  menu.value=id
}
const videoSuccess: UploadProps['onSuccess'] = (
  response,//后端存到oss返回的url
  uploadFile//临时的url
) => {
  // form.value.imageUrl = URL.createObjectURL(uploadFile.raw!)
  // form.value.imageUrl = response.data;
  postInfo.value.imgUrl[0]=response.data
  console.log("上传的图片地址",postInfo.value.imgUrl[0])
}
const submit=async()=>{
  if(postInfo.value.title==''||postInfo.value.content==''||postInfo.value.imgUrl[0]==''){
    ElMessage.error('请填写完整信息')
  }else{
    const str=JSON.stringify(postInfo.value.imgUrl)
    postInfo.value.imgUrl=str
    console.log(postInfo.value)
    const result=await addPostAPI(postInfo.value)
    if(result.data.code!=200){
      ElMessage.error('发布失败')
    }else{
    ElMessage.success('发布成功')
    router.push('/community/faxian')
    }
  }
}
const handleProgress=(event: { percent: any; })=>{
  event.percent=50
  console.log(event.percent)
}

const uploadVideo = ref<UploadInstance>()
const handleExceed: UploadProps['onExceed'] = async(files) => {
  // console.log(imgUrl.value)
  await deleteFileAPI(postInfo.value.imgUrl[0])
  uploadVideo.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  uploadVideo.value!.handleStart(file)
  uploadVideo.value!.submit()
}
onMounted(()=>{
  if(counterStore.jwt){
    user.value=parseJwt(counterStore.jwt)
    postInfo.value.authorAvatar=user.value.imageUrl
    postInfo.value.authorId=user.value.id
    postInfo.value.authorName=user.value.name
    console.log("用户信息",user.value)
  }else{
    router.push('/')
  }
})
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  showVideo.value=false
  // 检查文件类型是否为视频
  const videoTypes = ['video/mp4', 'video/avi', 'video/mov', 'video/wmv', 'video/flv', 'video/webm']
  if (!videoTypes.includes(rawFile.type)) {
    ElMessage.error('只能上传视频格式的文件!')
    return false
  }
  // 检查文件大小（50MB）
  if (rawFile.size / 1024 / 1024 > 50) {
    ElMessage.error('视频大小不能超过50MB!')
    return false
  }
  return true
}
</script>
<style scoped>
.video-body{
  position: relative;
  width: 100%;
  height: auto;
  background-color: rgba(252, 252, 252, 0.829);
}
.upload-demo{
  /* width:calc(100% - 40px); */
  /* height: 50%; */
  padding-bottom: 10px;
  /* background-color: #acacac; */
  /* margin:20px */
}
:deep(.el-upload-dragger){
  position: relative;
  width: 100%;
  height: 300px;
  /* padding: 11% 0; */
  background-color: rgba(197, 197, 197, 0.267);
}
</style>